<template>
  <div class="pt10 pl10 detail-table">
    <table cellspacing="0" cellpadding="0">
      <tr v-for="(item, index) in resultList" :key="index" :class="item.width || width">
        <template>
          <td class="detail-table__name rlt">
            <span class="abs detail-table__name__icon" v-if="item.hasIcon">※</span>
            <span class="tc">{{ item.name }}</span>
          </td>
          <td class="detail-table__value">
            <span v-if="item.label" :class="item.valueClass || valueClass">
              {{ info[item.label] || '--' }}</span>
            <span v-if="item.unit" :class="item.valueClass || valueClass"> {{ item.unit }}</span>
            <component v-if="item.render" :is="handleJSX(item.render)" />
          </td>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
// list格式: [{name: '中文', label: '字段名'}]
// info格式:
/* {
  字段名: 值,
  hide: '',
  unit: '人',
  render:{
    data () {
      return {
        a: 124
      }
    },
    methods: {
      click () {
        this.a = 123
      }
    },
    render (h) {
      return <div onClick={this.click}>{this.a}</div>
    }
  }
} */
/* return [
  <div class="button-group">
    <span>{info.form.invoiceCompany}</span>
    <a
      href="javasript:;"
      class="text-primary pl10"
      onClick={() => info.onDetail(res)}
    >
      详情
    </a>
  </div>
] */

export default {
  name: 'ZmDetailTable',
  components: {},
  mixins: [],
  props: {
    list: {
      // label文本及对应的key [{ name: '客户名称', label: 'customerName' }]
      type: [Function, Array],
      default: () => {}
    },
    info: {
      // 接口回传的数据
      type: [Object, Array],
      default: () => {
        return {}
      }
    },
    width: {
      type: String,
      default: 'wp50'
    }
  },
  data() {
    return {}
  },
  computed: {
    resultList() {
      console.log(this.list, '=======================list', this.form)
      return typeof this.list === 'function'
        ? this.list(this.info, this).filter((item) => {
          return !item.hide
        }) // list中隐藏部分过滤掉
        : this.list.filter((item) => {
          return !item.hide
        })
    },
    valueClass() {
      return 'vm lh30'
    }
  },
  watch: {},
  created() {},
  methods: {
    handleJSX(render) {
      return typeof render === 'function' ? { render } : render
    }
  }
}
</script>

<style scoped lang="scss">
// @import '~styles/_size.css';
$color: #fafafa;
$height: 45px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;
      border-bottom: 1px solid #ebeef5;

      td {
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 60px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 45px;
  }
}
/deep/.el-image-viewer__btn.el-image-viewer__close {
  /deep/.el-icon-close {
    color: $color;
  }
}
</style>
